<template>
  <b-container class="text-center font ">
    <b-row>
      <b-col class="mt-3">
        <h2 class="font-weight-bold color-muted">闲置物品轻松卖</h2>
        <p class="color-muted small-text mb-1">二手轻松换成钱</p>
      </b-col>
    </b-row>
    <hr>
    <b-row>
      <b-col cols="12" class="small-text color-muted">昨日在魔盒卖出</b-col>
      <b-col cols="12">
        <div class="color-number font-weight-bold ">
          <span class="num">1000 </span><span class="jian">件</span>
        </div>
      </b-col>
    </b-row>

    <b-card-group columns class="">
      <b-card
          :img-src="getsrc(index)"
          img-alt="Image"
          img-top
          tag="article"
          style="max-width: 20rem;"
          class="mb-2 mx-auto card-columns-add"
          v-for="(item,index) in items"
          @click="gotoitem(item.itemid)"
      >
        <b-card-text class="card-text-title">
          {{item.title}}
        </b-card-text>
        <b-card-text class="mb-1 mx-1 mx-md-3">
          <b-row>
            <b-col class="text-left  text-danger font-weight-bold"><span>￥{{item.price}}</span></b-col>
            <b-col class="text-right  color-light-gray small-text my-auto" v-if="item.wants !== 0"><span>{{item.wants}} person</span></b-col>
          </b-row>
        </b-card-text>
        <b-card-text class="my-1 mx-1 mx-md-3">
          <b-row class="px-3">
            <b-col cols="10" align-self="start" class="p-0 text-left">
              <b-avatar :variant="usercolor(index)" :src="usersrc(index)" size="30px" class="p-0"></b-avatar>

              <span class="color-muted card-text-title text-left">{{users[index].nickname}}</span>
            </b-col>
            <b-col cols="2" align-self="end" class="p-0">

              <b-img :src="userrank(index)" height="30px" width="30px" right/>
            </b-col>
          </b-row>
        </b-card-text>
      </b-card>

    </b-card-group>
    <b-row class="my-2" align-h="center" v-if="whatsmore">
      <b-col cols="6">
        <b-btn variant="primary" pill block class="bg-theme border-0" v-if="!loading" @click="load">加载更多...</b-btn>
        <b-btn variant="primary" pill block class=" border-0" disabled v-else>
          加载中
          <b-spinner variant="light" small class=""/>
        </b-btn>

      </b-col>
    </b-row>
  </b-container>
</template>

<script>
  // @ is an alias to /src
  // import HelloWorld from '@/components/HelloWorld.vue'

  import urlconfig from "../urlconfig";

  export default {
    name: 'Home',
    components: {},
    data() {
      return {
        rank1f: require("../assets/rank1-f.svg"),
        rank1: require('../assets/rank1.svg'),
        rank2: require('../assets/rank2.svg'),
        rank3: require('../assets/rank3.svg'),
        loading: false,
        offset:0,
        size:5,
        whatsmore:true,
        items:[],
        users:[],
      }
    },
    methods: {
      usercolor(index){
        return this.users[index].avatarcolor
      } ,
      usersrc(index){
        return urlconfig.baseUrl+urlconfig.avatarResource+this.users[index].avatarpath
      },
      userrank(index){
        if (this.users[index].rank < 100) {
          return this.rank1f
        } else if (this.users[index].rank < 200) {
          return this.rank1
        } else if (this.users[index].rank < 1000) {
          return this.rank2
        } else {
          return this.rank3
        }
      },
      getsrc(index){
        return urlconfig.baseUrl+urlconfig.fileResources+this.items[index].files[0].filename
      },
      makeToast(msg, res = true) {
        this.$bvToast.toast(msg, {
          title: res ? '操作成功!' : '操作失败！',
          variant: res ? 'primary' : 'danger',
          solid: true,
          autoHideDelay: 5000,
        })
      },
      load() {
        this.loading = true
        let data={
          offset:this.offset,
          size:this.size,
          uuid:this.$store.state.uuid
        }
        this.$ajax.post('/item/allitems',data).then(resp=>{
          let data = resp.data
          if (data.code ===200){
            let items = data.data.items
            let users = data.data.users
            for (let index in items){
              this.items.splice(this.items.length+index,0,items[index])
              this.users.splice(this.users.length+index,0,users[index])
            }
            if (items.length === 0){
              this.whatsmore = false
            }
            this.offset+=items.length
          }else{
            this.makeToast(data.msg,false)
          }
          this.loading = false
        }).catch(err=>{
          this.makeToast("请求失败",false)
          console.log(err);
          this.loading=false
        })
      },
      gotoitem(itemid){
        this.$router.push('/item/'+itemid)
      },
      gotouser(index){
        this.$router.push('/user/'+this.users[index].uuid)
      }

    },
    mounted() {
      this.load()
    }

  }
</script>

<style scoped>
  .num {
    font-size: 2em;
    font-weight: bold;
  }

  .jian {
    font-size: 1em;
    font-weight: bold;
  }

  .card-body {
    padding: 0;
  }

  .card-text-title {
    font-size: 0.9em;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: 5px;
  }

  .card-columns {
    column-count: 2;
    orphans: 1;
    widows: 1;
    column-gap: 1.25rem;

  }

  .card-columns-add {
    display: inline-block;
    width: 100%;
  }
</style>
